<!DOCTYPE html>
<html>
    <head>
        <title>Jewelry</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link type="text/css" rel="stylesheet" href="css/layout.css" />
        <link type="text/css" rel="stylesheet" href="css/widgets.css" />
        <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
        <script type="text/javascript" src="js/coin-slider/coin-slider.js"></script>
        <link rel="stylesheet" href="js/coin-slider/coin-slider-styles.css" type="text/css"/>
        <link rel="stylesheet" href="js/treeview/jquery.treeview.css" />
        <script src="js/treeview/lib/jquery.cookie.js" type="text/javascript"></script>
        <script src="js/treeview/jquery.treeview.js" type="text/javascript"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                $ ('.link_list_1 ul.list li').each(function(i){
                    var newClass = '';
       
                    if ((i+1) % 3 == 0) {
                        newClass = 'last';
                    }
                    $(this).addClass(newClass);
        
                });
                
                $ ('.link_list_2 ul.list li:last-child').addClass('last');
                                   
                $ ('.product_feature ul.product_list li').each(function(i){
                    var newClass = '';
       
                    if ((i+1) % 3 == 0) {
                        newClass = 'last';
                    }
                    $(this).addClass(newClass);
        
                });

                $('.banner #banner_wrapper').coinslider({
                    width: 996, 
                    height: 311, 
                    navigation: false, 
                    delay: 2000
                });
                
                $("#vmenu_wi_2 .vmenu_list").treeview({
                    animated:"normal",
                    persist: "cookie"
                });
                
                $("#vmenu_wi_1 .vmenu_list").treeview({
                    animated:"normal",
                    persist: "cookie"
                });
                
            });
        </script>
    </head>

    <body>
        <div id="wrapper">
            <div id="wrapper_top">
                <div id="hook_header" class="hook">

                    <!-- LOGO WIDGET -->
                    <div id="logo_wi" class="logo">
                        <div class="image_wrapper">
                            <img src="images/logo.png" alt="logo_image"/>
                        </div>
                    </div>
                    <!-- END LOGO WIDGET -->

                    <!-- SEARCH BAR WIDGET -->
                    <div id="search_bar_wi" class="search_bar"> 

                        <form id="searchForm" class="searchForm" action="#" method="post">
                            <div class="search_panel">
                                <input type="text" class="searchText" id="searchText" value="Search Keyword Here ..."/> 
                                <input name="search" type="image" class="buttonSearch" id="buttonSearch" src="images/search_icon.png" value=""/>
                            </div>
                        </form>
                    </div>
                    <!--END SEARCH BAR WIDGET --> 

                    <!-- WIDGET LINK LIST -->
                    <div id="link_list_wi_1" class="link_list_1">
                        <ul class="list">
                            <li>
                                <a href="#">Shipping & return</a>
                            </li>

                            <li>
                                <a href="#">Login</a>
                            </li>

                            <li>
                                <a href="#">Create an account</a>
                            </li>
                        </ul>
                        <!-- End .link_list -->
                    </div>
                    <!-- END WIDGET LINK LIST -->

                    <!-- WIDGET CART BLOCK -->
                    <div id="cart_block_wi" class="cart_block">
                        <div class="image_wrapper">
                            <a href="#"><img src="images/cart_icon.png" alt="cart_image"/></a>    
                        </div>
                        <!-- End #image_wrapper -->
                        <div class="cart_block_infor">
                            <a href="#">Now in your cart<span class="count_products"> 0 </span> <span class="items">items</span></a>
                        </div>    
                        <div class="clear"></div>
                    </div>
                    <!-- END WIDGET CART BLOCK -->
                </div>
                <!-- End #hook_header -->
            </div>
            <!-- End #wrapper_top -->

            <div id="wrapper_main">
                <div id="hook_custom_1" class="hook">
                    <div id="hook_hmenu" class="hook">
                        <!-- HMENU WIDGET -->
                        <div id="hmenu_wi" class="hmenu">
                            <div class="hmenu_wrapper">
                                <ul class="hmenu_list">
                                    <li>
                                        <a href="#" class="active">Home</a>
                                    </li>
                                    <li>
                                        <a href="#">Products</a>
                                    </li>
                                    <li>
                                        <a href="#">News</a>
                                    </li>
                                    <li>
                                        <a href="#">Contact</a>
                                    </li>
                                    <li>
                                        <a href="#">Products</a>
                                    </li>

                                </ul>
                            </div>
                            <!-- End hmenu_wrapper -->
                        </div>
                        <!-- END HMENU WIDGET --> 
                    </div>
                    <!-- End #hook_hmenu -->

                    <div id="hook_sidebar" class="hook">
                        <!-- VMENU WIDGET -->
                        <div id="vmenu_wi_1" class="vmenu">
                            <div class="vmenu_header">
                                Category
                            </div><!-- End .vmenu_header -->

                            <ul class="vmenu_list">
                                <li class="parent"><a href="#">Living room</a>
                                    <ul>
                                        <li><a href="#">TV Board</a></li>
                                        <li><a href="#">TV Board</a></li>
                                    </ul>
                                </li>
                                <li class="parent"><a href="#">Sitting room</a></li>
                                <li class="parent"><a href="#">Bath room</a>
                                    <ul>
                                        <li><a href="#">TV Board</a></li>
                                        <li><a href="#">TV Board</a></li>
                                    </ul>
                                </li>
                                <li class="parent"><a href="#">Film room</a></li>
                                <li class="parent"><a href="#">Bed room</a></li>
                                <li class="parent"><a href="#">Kitchen room</a></li>
                            </ul><!-- End .vmenu_list -->
                        </div>
                        <!-- End VMENU WIDGET -->

                        <!-- VMENU WIDGET -->
                        <div id="vmenu_wi_2" class="vmenu">
                            <div class="vmenu_header">
                                Category
                            </div><!-- End .vmenu_header -->

                            <ul class="vmenu_list">
                                <li class="parent"><a href="#">Living room</a>
                                    <ul>
                                        <li><a href="#">TV Board</a></li>
                                        <li><a href="#">TV Board</a></li>
                                    </ul>
                                </li>
                                <li class="parent"><a href="#">Sitting room</a></li>
                                <li class="parent"><a href="#">Bath room</a>
                                    <ul>
                                        <li><a href="#">TV Board</a></li>
                                        <li><a href="#">TV Board</a></li>
                                    </ul>
                                </li>
                                <li class="parent"><a href="#">Film room</a></li>
                                <li class="parent"><a href="#">Bed room</a></li>
                                <li class="parent"><a href="#">Kitchen room</a></li>
                            </ul><!-- End .vmenu_list -->
                        </div>
                        <!-- End VMENU WIDGET -->
                    </div>
                    <!-- END #hook_sidebar -->

                    <div id="hook_custom_2" class="hook">
                        <!-- PRODUCT FEATURE WIDGET -->
                        <div id="product_feature_wi" class="product_feature">
                            <div class="title">
                                Products
                            </div>
                            <!-- End .title -->

                            <ul class="product_list">
                                <li class="products">
                                    <div class="image_wrapper">
                                        <a href="#"><img src="images/product_image.png" alt="1" /></a>
                                    </div>
                                    <!-- End .image_wrapper -->

                                    <div class="product_infor">
                                        <div class="price">
                                            <span>1999,99$</span>
                                        </div><!-- End .price -->
                                        <div class="cart_button">
                                            <a href="#" class="add_to_cart">Ajouter au panier</a>
                                        </div><!-- End .cart_button-->
                                        <div class="clear"></div>
                                        <a class="product_name" href="#">Nulla suscipit elementum justo Nulla suscipit Nulla suscipit elementum justo Nulla suscipit Nulla suscipit elementum justo Nulla suscipit</a>
                                    </div>
                                    <!-- End .product_infor -->
                                </li>
                                <!-- End .products -->

                                <li class="products">
                                    <div class="image_wrapper">
                                        <a href="#"><img src="images/product_image.png" alt="1" /></a>
                                    </div>
                                    <!-- End .image_wrapper -->

                                    <div class="product_infor">
                                        <div class="price_change">
                                            <div class="change">
                                                <span class="promotion">-10%</span>
                                                <span class="old_price">210$</span>
                                            </div>
                                            <span class="new_price">199$</span>
                                        </div><!-- End .price -->
                                        <div class="cart_button">
                                            <a href="#" class="add_to_cart">Ajouter au panier</a>
                                        </div><!-- End .cart_button-->
                                        <div class="clear"></div>
                                        <a class="product_name" href="#">Nulla suscipit elementum justo Nulla suscipit</a>
                                    </div>
                                    <!-- End .product_infor -->
                                </li>
                                <!-- End .products -->

                                <li class="products">
                                    <div class="image_wrapper">
                                        <a href="#"><img src="images/product_image.png" alt="1" /></a>
                                    </div>
                                    <!-- End .image_wrapper -->

                                    <div class="product_infor">
                                        <div class="price_change">
                                            <div class="change">
                                                <span class="promotion">-10%</span>
                                                <span class="old_price">210$</span>
                                            </div>
                                            <span class="new_price">199$</span>
                                        </div><!-- End .price -->
                                        <div class="cart_button">
                                            <a href="#" class="add_to_cart">Ajouter au panier</a>
                                        </div><!-- End .cart_button-->
                                        <div class="clear"></div>
                                        <a class="product_name" href="#">Nulla suscipit elementum justo Nulla suscipit</a>
                                    </div>
                                    <!-- End .product_infor -->
                                </li>
                                <!-- End .products -->

                                <li class="products">
                                    <div class="image_wrapper">
                                        <a href="#"><img src="images/product_image.png" alt="1" /></a>
                                    </div>
                                    <!-- End .image_wrapper -->

                                    <div class="product_infor">
                                        <div class="price">
                                            <span>1999,99$</span>
                                        </div><!-- End .price -->
                                        <div class="cart_button">
                                            <a href="#" class="add_to_cart">Ajouter au panier</a>
                                        </div><!-- End .cart_button-->
                                        <div class="clear"></div>
                                        <a class="product_name" href="#">Nulla suscipit elementum justo Nulla suscipit</a>
                                    </div>
                                    <!-- End .product_infor -->
                                </li>
                                <!-- End .products -->

                                <li class="products">
                                    <div class="image_wrapper">
                                        <a href="#"><img src="images/product_image.png" alt="1" /></a>
                                    </div>
                                    <!-- End .image_wrapper -->

                                    <div class="product_infor">
                                        <div class="price">
                                            <span>1999,99$</span>
                                        </div><!-- End .price -->
                                        <div class="cart_button">
                                            <a href="#" class="add_to_cart">Ajouter au panier</a>
                                        </div><!-- End .cart_button-->
                                        <div class="clear"></div>
                                        <a class="product_name" href="#">Nulla suscipit elementum justo Nulla suscipit</a>
                                    </div>
                                    <!-- End .product_infor -->
                                </li>
                                <!-- End .products -->

                                <li class="products">
                                    <div class="image_wrapper">
                                        <a href="#"><img src="images/product_image.png" alt="1" /></a>
                                    </div>
                                    <!-- End .image_wrapper -->

                                    <div class="product_infor">
                                        <div class="price_change">
                                            <div class="change">
                                                <span class="promotion">-10%</span>
                                                <span class="old_price">210$</span>
                                            </div>
                                            <span class="new_price">199$</span>
                                        </div><!-- End .price -->
                                        <div class="cart_button">
                                            <a href="#" class="add_to_cart">Ajouter au panier</a>
                                        </div><!-- End .cart_button-->
                                        <div class="clear"></div>
                                        <a class="product_name" href="#">Nulla suscipit elementum justo Nulla suscipit</a>
                                    </div>
                                    <!-- End .product_infor -->
                                </li>
                                <!-- End .products -->

                                <li class="products">
                                    <div class="image_wrapper">
                                        <a href="#"><img src="images/product_image.png" alt="1" /></a>
                                    </div>
                                    <!-- End .image_wrapper -->

                                    <div class="product_infor">
                                        <div class="price_change">
                                            <div class="change">
                                                <span class="promotion">-10%</span>
                                                <span class="old_price">210$</span>
                                            </div>
                                            <span class="new_price">199$</span>
                                        </div><!-- End .price -->
                                        <div class="cart_button">
                                            <a href="#" class="add_to_cart">Ajouter au panier</a>
                                        </div><!-- End .cart_button-->
                                        <div class="clear"></div>
                                        <a class="product_name" href="#">Nulla suscipit elementum justo Nulla suscipit</a>
                                    </div>
                                    <!-- End .product_infor -->
                                </li>
                                <!-- End .products -->

                                <li class="products">
                                    <div class="image_wrapper">
                                        <a href="#"><img src="images/product_image.png" alt="1" /></a>
                                    </div>
                                    <!-- End .image_wrapper -->

                                    <div class="product_infor">
                                        <div class="price_change">
                                            <div class="change">
                                                <span class="promotion">-10%</span>
                                                <span class="old_price">210$</span>
                                            </div>
                                            <span class="new_price">199$</span>
                                        </div><!-- End .price -->
                                        <div class="cart_button">
                                            <a href="#" class="add_to_cart">Ajouter au panier</a>
                                        </div><!-- End .cart_button-->
                                        <div class="clear"></div>
                                        <a class="product_name" href="#">Nulla suscipit elementum justo Nulla suscipit</a>
                                    </div>
                                    <!-- End .product_infor -->
                                </li>
                                <!-- End .products -->

                                <li class="products">
                                    <div class="image_wrapper">
                                        <a href="#"><img src="images/product_image.png" alt="1" /></a>
                                    </div>
                                    <!-- End .image_wrapper -->

                                    <div class="product_infor">
                                        <div class="price_change">
                                            <div class="change">
                                                <span class="promotion">-10%</span>
                                                <span class="old_price">210$</span>
                                            </div>
                                            <span class="new_price">199$</span>
                                        </div><!-- End .price -->
                                        <div class="cart_button">
                                            <a href="#" class="add_to_cart">Ajouter au panier</a>
                                        </div><!-- End .cart_button-->
                                        <div class="clear"></div>
                                        <a class="product_name" href="#">Nulla suscipit elementum justo Nulla suscipit</a>
                                    </div>
                                    <!-- End .product_infor -->
                                </li>
                                <!-- End .products -->
                            </ul>
                            <!-- End .product_list -->
                            <div class="wrapper_pagination">
                                <div class="count_page">
                                    <p>Displaying 1 to 4 (of 12  reviews)</p>
                                </div>   
                                <!-- End .count_page -->

                                <div class="pagination">
                                    <ul>
                                        <li class="result">Result page :</li>
                                        <li class="active"><a href="#">1</a></li>
                                        <li><a href="#">2</a></li>
                                        <li><a href="#">3</a></li>
                                        <li class="next"><a href="#">[next>>]</a></li>
                                    </ul>
                                </div>   
                                <!-- End .pagination -->
                            </div>
                            <!-- End .wrapper_pagination -->
                        </div>
                        <!-- END PRODUCT FEATURE WIDGET -->

                    </div>
                    <!-- END #hook_custom_2 -->
                    <div class="clear"></div>
                </div>
                <!-- End #hook_custom_1 -->

            </div>
            <!-- End #wrapper_main -->
            <div id="wrapper_footer">
                <div id="hook_footer" class="hook">
                    <!-- HTML widget -->
                    <div id="html_wi_1" class="html_1">
                        <a href="#"><img src="images/logo_small.png" alt="logo_small"/></a>
                    </div>
                    <!-- END HTML WIDGET -->

                    <!-- LINK LIST WIDGET -->
                    <div id="link_list_wi_2" class="link_list_2">
                        <ul class="list">
                            <li><a href="#">Lorem ipsum dolor</a></li>
                            <li><a href="#">Lorem ipsum dolor</a></li>
                            <li><a href="#">Lorem ipsum dolor</a></li>
                        </ul>
                    </div>
                    <!-- END LINK LIST WIDGET -->

                    <!-- FOOTER WIDGET -->
                    <div id="footer_wi_1" class="footer">
                        <p>©2012 POWERED BY JEWELRY™. ALL RIGHT RESERVED.</p>
                    </div>
                    <!-- END FOOTER WIDGET -->
                </div>
                <!-- End #hook_footer -->
            </div>
        </div>    
        <!-- End #wrapper -->
    </body>
</html>
